<template>
  <div  class="imgSingle clearfloat">
    <div v-for="item in videoList" class="videoBox">
      <img src="../../../assets/img/player.png" @click="playVideo(item)">
    </div>
      <el-image v-for="(item,index) in picList"
      :key="index"
        style="width: 100px; height: 100px"
        :src="item" 
        :preview-src-list="picList">
  </el-image>
  </div>
</template>

<script>
import fileType from "../fileType.js";
export default {
  name: "imgAndVedioPreview",
  componentName: "imgAndVedioPreview",
  mixins: [fileType],
  props: {
    fileUrl: null
  },
  data() {
    return {
      picList: [],
      videoList:[]
    };
  },
  watch: {
    fileUrl: {
      handler(v) {
        this.getPicList();
      },
      deep: true
    }
  },
  methods: {
    getPicList() {
        console.log(this.fileUrl)
      if (this.fileUrl) {

        this.picList = [];
        this.fileUrl.forEach(item => {
          if (this.isPic(item.fileSuffix)) {
            this.picList.push(item.fileAbsoluteSavePath);
          }
        });
        this.videoList = [];
        this.fileUrl.forEach(item => {
          if (this.isVideo(item.fileSuffix)) {
            this.videoList.push(item);
          }
        });
        console.log(this.videoList);
      }
    },
    playVideo(item){
        window.open(item.fileAbsoluteSavePath)
      },
  },
  created() {
    this.getPicList();
  }
};
</script>

<style scoped>
.imgSingle img {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
<!--0225-->
